<template>
  <el-dialog :model-value="visible" title="选择批次" width="800">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <el-form ref="queryFormRef" :model="pd.queryParams" :inline="true" label-width="68px">
        <el-form-item label="批次" prop="name">
          <el-input v-model="pd.queryParams.name" placeholder="请输入批次" clearable style="width: 240px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row>
      <el-table
        ref="refTable"
        v-loading="pd.loading"
        :data="pd.hatchList"
        highlight-current-row
        height="230px"
        @select="select1"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55" align="center" />
        <!--        <el-table-column label="" align="center" prop="id" v-if="true" />-->
        <el-table-column label="批次" align="center" prop="name" />
        <el-table-column label="设备" align="center" prop="productName" />
        <el-table-column label="品种" align="center" prop="varietiesName" />
        <el-table-column label="孵蛋数量" align="center" prop="eggNum" />
        <el-table-column label="出壳数量" align="center" prop="chickNum" />
        <el-table-column label="在养数量" align="center" prop="aliveNum" />
      </el-table>
    </el-row>
    <pagination
      v-show="pd.total > 5"
      v-model:page="pd.queryParams.pageNum"
      v-model:limit="pd.queryParams.pageSize"
      small
      class="mt-4"
      :total="pd.total"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSelected"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { parseTime } from '@/utils/ruoyi';
import { listHatch } from '@/api/farm/chicken/hatch';
import { HatchVO } from '@/api/farm/chicken/hatch/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<ElFormInstance>();
const emit = defineEmits(['update:modelValue', 'loadList', 'ok']);

const props = defineProps({
  rowData: {
    type: Object,
    default: null
  },
  visible: {
    type: Boolean,
    default: false
  },
  // 是否单选
  isSingle: {
    type: Boolean,
    default: true
  },
  params: {
    type: Object,
    default: null
  }
});
const pd = reactive({
  open: false,
  reParams: [],
  dataText: '',
  loading: true,
  total: 0,
  hatchList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    name: undefined,
    cateId: undefined,
    warehouseId: undefined,
    params: {}
  }
});
/*选中操作，单选模式*/
function select1(selection: HatchVO[], row: HatchVO[]) {
  //是否为单选模式
  if (props.isSingle) {
    //清空选项
    (proxy?.$refs['refTable'] as any).clearSelection();
  }
  //将这行选中
  (proxy?.$refs['refTable'] as any).toggleRowSelection(row, true);
}
function selectAll(selection: HatchVO[]) {
  //是否为单选模式
  if (props.isSingle) {
    //清空选项
    (proxy?.$refs['refTable'] as any).clearSelection();
  }
}
/** 查询商品管理列表 */
const getList = async () => {
  pd.loading = true;
  const res = await listHatch(pd.queryParams);
  console.log(res);
  pd.hatchList = res.rows;
  pd.total = res.total;
  pd.loading = false;
};
/*选择按钮操作*/
const handleSelected = () => {
  pd.reParams = (proxy?.$refs['refTable'] as any).getSelectionRows();
  if (pd.reParams.length === 0) {
    proxy?.$modal.msgError('请选择数据，至少一行!!');
    return;
  }
  pd.reParams.forEach((v, i, a) => {
    pd.dataText = v.name!;
    return;
  });
  pd.open = false;
  emit('ok', pd.reParams);
  cancel();
};
//数据变化页面需要变化,默认null
// watch(
//   () => props.dataText,
//   (val) => {
//     pd.dataText = props.dataText as string;
//   },
//   { deep: true, immediate: true }
// );
/** 搜索按钮操作 */
const handleQuery = () => {
  pd.queryParams.pageNum = 1;
  getList();
};

// 初始化1 样式的展示
function initSearch() {
  pd.queryParams = { ...pd.queryParams, ...props.params };
  handleQuery();
  pd.open = true;
}

/** 表单重置 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

function clearDataText() {
  pd.dataText = 'null';
}

defineExpose({ initSearch, clearDataText });
const cancel = () => {
  // reset();
  emit('update:modelValue', false);
};
onMounted(() => {
  getList();
});
</script>

<style scoped></style>
